<template>
    <div class="query">
        <el-form :inline="true" :model="searchQuery" class="demo-form-inline">
            <el-form-item label="点位名称">
                <el-input v-model="searchQuery.pointName" placeholder="点位名称" />
            </el-form-item>
            <el-form-item label="IP地址">
                <el-input v-model="searchQuery.ipAddress" placeholder="IP地址" />
            </el-form-item>
            <el-form-item label="点位KEY">
                <el-input v-model="searchQuery.pointKey" placeholder="点位KEY" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleAdd" style="margin-left: 10px; height: 32px">新增</el-button>
                <el-button type="success" @click="loadData(1)">搜索</el-button>
                <el-button type="primary" @click="handleReset()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="list">
        <el-table :data="tableData" style="width: 100%">
            <template v-for="(item, index) in tableLabel" :key="index">
                <el-table-column :prop="item.prop" :width="item.width" :label="item.label" :align="item.align">
                    <template #default="scope">
                        <template v-if="item.prop === 'action'">
                            <el-link :underline="false" type="primary" @click="handleEdit(scope.row)">编辑</el-link>
                            <el-divider direction="vertical"></el-divider>
                            <el-popconfirm title="确定删除该记录吗" placement="top" @confirm="handleDelete(scope.row)">
                                <template v-slot:reference>
                                    <el-link type="danger" :underline="false">删除</el-link>
                                </template>
                            </el-popconfirm>
                        </template>
                    </template>
                </el-table-column>
            </template>
            <!-- <el-table-column fixed prop="id" label="ID" width="120" />
            <el-table-column prop="pointName" label="点位名称" width="150" />
            <el-table-column prop="ipAddress" label="IP地址" width="120" />
            <el-table-column prop="pointKey" label="点位Key" width="120" />
            <el-table-column fixed="right" label="Operations" width="120">
                <template #default>
                    <el-button link type="primary" size="small" @click="handleClick">修改</el-button>
                    <el-button link type="primary" size="small">删除</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
        <point-modal v-if="Visiable" ref="pointModal" @ok="loadData(1)" />
    </div>
</template>

<script>
import axios from 'axios';
import  pointModal  from './model/pointModal.vue';
import { defineComponent, ref, onMount } from 'vue';
export default {
    name: "ConfigList",
    components: { pointModal },
    data() {
        return {
            Visiable:false,
            pagination: {
                current: 1,
                size: 10,
                total: 0,
            },
            searchQuery: {},
            tableData: [],
            tableLabel: [
                {
                    prop: "pointName",
                    label: "点位名称",
                    align: "center",
                },
                {
                    prop: "ipAddress",
                    label: "IP地址",
                    align: "center",
                },
                {
                    prop: "pointKey",
                    label: "点位key",
                    align: "center",
                },
                {
                    prop: "action",
                    label: "操作",
                    align: "center",
                },
            ],

        };
    },
    created() {
        // 进入页面开始查询
        this.loadData(1);
    },
    methods: {
        loadData(cur) {
            if (cur) {
                // this.$set(this.pagination, "current", cur);
                this.pagination.current = cur;
            }
            const param = {
                ...this.searchQuery,
                pageNumber: this.pagination.current,
                pageSize: this.pagination.size,
            };
            axios.get('/api/config/select', { params: param }).then((res) => {
                if (res.data.code !== 200) {
                    this.$message.error(res.message || "请求失败");
                    return;
                }
                this.tableData = res.data.data.list;
                this.pagination.total = res.data.data.total;
            });
        },
        handleSizeChange(size) {
            // this.$set(this.pagination, "size", size);
            this.pagination.size = size;
            this.loadData();
        },
        handleCurrentChange(currentPage) {
            // this.$set(this.pagination, "current", currentPage);
            this.pagination.current = currentPage;
            this.loadData();
        },
        handleReset() {
            this.searchQuery = {};
            this.loadData(1);
        },
        // 删除方法
        handleDelete(row) {
            console.log(row)
            axios.get("http://127.0.0.1:8082/api/config/delete/" + row.id).then((res) => {
                if (res.data.code !== 200) {
                    this.$message.error(res.message || "请求失败");
                    return;
                }
                this.$message.success(res.message || "操作成功");
                this.loadData(1);
            })
        },
        // 增加方法
        handleAdd() {
            this.Visiable = true;
            this.$nextTick(() => {
                // console.log(this.$refs)
                this.$refs.pointModal.add();
            });
        },
        // 编辑方法
        handleEdit(row) {
            this.Visiable = true;
            this.$nextTick(() => {
                this.$refs.pointModal.edit(row);
            });
        },
    },
}


</script>
